<template>
    <z-paging
        ref="paging"
        :refresher-out-rate="0.8"
        :to-bottom-loading-more-enabled="false"
        :show-empty-view-reload-when-error="false"
        :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
        empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
        empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
        empty-view-error-text="暂无数据"
        safe-area-inset-bottom
        bg-color="#FFF"
    >
        <view class="card">
            <!-- 名片部分 -->
            <view class="card_detail">
                <view class="adviser_detail">
                    <u-text
                        :text="cardFormList.deptName || '--'"
                        color="#FFFFFF"
                        size="28rpx"
                        margin="0 0 0 32rpx"
                    />
                    <view class="adviser_info">
                        <view>
                            <view style="display: flex">
                                <u-text
                                    :text="cardFormList.salesmanName || '--'"
                                    color="#333"
                                    size="40rpx"
                                    bold
                                />
                                <view style="margin-left: 26rpx"></view>
                                <u-icon
                                    name="/static/img/card/editIcon.png"
                                    size="40rpx"
                                    space="12rpx"
                                    v-if="id === userInfo.id"
                                    @click="to_editCard"
                                />
                            </view>
                            <u-text
                                :text="cardFormList.postName || '--'"
                                color="#666"
                                size="26rpx"
                                margin="4rpx 0 0 0"
                            />
                        </view>
                        <image
                            class="adviser_info_img"
                            :src="cardFormList.avatar || MissingAvatar"
                            mode=""
                        ></image>
                    </view>
                    <view class="card_details">
                        <u-icon
                            name="/static/img/card/phone.png"
                            size="30rpx"
                            space="12rpx"
                            labelColor="#fff"
                            labelSize="28rpx"
                            :label="cardFormList.contactPhone || '--'"
                        />
                        <u-gap height="12rpx"></u-gap>
                        <u-icon
                            name="/static/img/card/mail.png"
                            size="30rpx"
                            space="12rpx"
                            labelColor="#fff"
                            labelSize="28rpx"
                            :label="cardFormList.email || '--'"
                        />
                        <u-gap height="12rpx"></u-gap>
                        <view style="display: flex; align-items: center">
                            <image
                                src="../../static/img/card/addres.png"
                                style="
                                    width: 30rpx;
                                    height: 30rpx;
                                    margin-right: 12rpx;
                                "
                            ></image>
                            <view
                                style="
                                    width: 600rpx;
                                    color: #fff;
                                    word-break: normal;
                                "
                                >{{
                                    cardFormList.province +
                                        cardFormList.city +
                                        cardFormList.county +
                                        cardFormList.detailedAddress || "--"
                                }}</view
                            >
                        </view>
                    </view>
                </view>
            </view>

            <!-- 个人简介 -->
            <view class="enterprise_details">
                <view class="enterprise_top">
                    <text class="enterprise_bg"></text>
                    <u-text text="个人简介" size="32rpx" bold />
                </view>
                <view class="enterprise_t">{{
                    cardFormList.resume || "暂无简介"
                }}</view>
            </view>
            <!-- 公司介绍名片分享 -->
            <view class="nav_info">
                <!-- <view class="to_enterprise" @click="to_enterprise()"
                    >公司介绍</view
                > -->
                <button class="to_share" open-type="share">分享名片</button>
            </view>
            <!-- 拨打电话 -->
            <view class="call_info">
                <view class="call_infos" @click="to_call">
                    <view class="to_call">
                        <u-icon
                            name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/8315385cc2054861a609f0c1c677f5cf.png"
                            size="108rpx"
                        />
                        <u-text
                            text="拨打电话"
                            size="32rpx"
                            bold
                            color="#3D3D3D"
                            margin="0 36rpx"
                        />
                    </view>
                    <u-icon
                        name="arrow-right"
                        color="#FF9000 "
                        width="4rpx"
                        height="36rpx"
                    ></u-icon>
                </view>
            </view>
            <u-popup
                :show="tel_show"
                mode="bottom"
                @close="tel_close"
                :round="10"
            >
                <u-gap height="32rpx" />
                <u-text
                    text="复制号码"
                    size="34rpx"
                    align="center"
                    @click="savePhone"
                />
                <u-gap height="32rpx" />
                <u-line></u-line>
                <u-gap height="32rpx" />
                <u-text
                    text="呼叫手机"
                    size="34rpx"
                    align="center"
                    @click="contact"
                />
                <u-gap height="32rpx" />
                <u-gap height="14rpx" bgColor="#F5F5F5" />
                <u-gap height="32rpx" />
                <u-text
                    text="取消"
                    size="34rpx"
                    align="center"
                    @click="tel_close"
                />
                <u-gap height="32rpx" />
            </u-popup>
            <u-gap height="14rpx" bgColor="#F5F5F5;"></u-gap>
        </view>
    </z-paging>
</template>

<script>
import { noTokenbusinessCard } from "@/api/cardSalesman";
import { mapGetters } from "vuex";
import {
		appIdCard
} from '@/api/card';

export default {
    data() {
        return {
            overlayOpacity: "0.5",
            MissingAvatar: "/static/img/conference/MissingAvatar.png",
            signBoxCustomStyle: {
                width: "100vw",
                height: "",
            },
            tel_show: false,
            navShow: false,
            list: [],
            id: "",
            cardFormList: {},
            phoneNumber: "",
			tenantId:''
        };
    },
    computed: {
        ...mapGetters(["isLogin", "userInfo"]),
    },
    onShow() {
        this.getBusinessCard(this.id);
    },
    onLoad(options) {
        this.id = options.salesmanId || this.userInfo.id;
        // TODO 这段代码解决 业务员分享名片 客户角色进入 重定向到客户的名片详情页面（业务和客户名片不一致，分为两套，）customer 客户端 salesman业务员
        if (this.$store.getters?.authority === "customer") {
            let pages = getCurrentPages();
            let currentPage = pages[pages.length - 1];
            uni.$u.route({
                type: "redirectTo",
                url: "pages_card/user_card/index",
                params: currentPage.options,
            });
            return;
        }
    },
    methods: {
        to_editCard() {
            uni.navigateTo({
                url: "/pages_my/edit_card/index",
            });
        },
        //发送给朋友
        onShareAppMessage(res) {
            return {
                title:
                    "HI!我向您推荐了" +
                    this.cardFormList.salesmanName +
                    "的智能名片",
                path: "pages_my/myCard/index?salesmanId=" + this.id,
            };
        },
        to_call() {
            if (this.cardFormList.contactPhone == "") {
                uni.$u.toast("暂无手机号，不支持拨打电话！");
                return;
            } else {
                this.tel_show = true;
            }
        },
        savePhone() {
            let data = this.cardFormList.contactPhone;
            uni.setClipboardData({
                data: data,
                success: (res) => {
                    uni.showToast({
                        title: "已复制",
                        duration: 2000,
                    });
                },
            });
        },
        tel_close() {
            this.tel_show = false;
        },
        contact() {
            uni.makePhoneCall({
                // 手机号
                phoneNumber: this.cardFormList.contactPhone,
                // 成功回调
                success: (res) => {},
                // 失败回调
                fail: (res) => {},
            });
        },

        async getBusinessCard(id) {
            //获取名片信息
            const res = await noTokenbusinessCard(id);
            this.cardFormList = res.data;
            this.id = res.data.id;
        },
		// to_enterprise() {
		// 	uni.navigateTo({
		// 		url: '/pages_card/enterprise/index?tenantId='+this.$store.getters.userInfo.tenantId
		// 	})
		// },
        to_addWechat() {
            if (
                this.cardFormList.wechatQrCode == "" ||
                this.cardFormList.wechatQrCode == null
            ) {
                uni.$u.toast("未上传微信二维码！");
                return;
            } else {
                uni.navigateTo({
                    url:
                        "/pages_card/add_wechart/index?wechatQrCode=" +
                        this.cardFormList.wechatQrCode,
                });
            }
        },
        toAdvisor(e) {
            let id = e.currentTarget.dataset.id;
            setTimeout(() => {
                uni.navigateTo({
                    url: "/pages_card/user_card/index?salesmanId=" + id,
                });
            }, 500);
        },
    },
};
</script>

<style>
.card {
    background: #ffffff;
    width: 100%;
    /* height: 100vh; */
    color: #ffffff;
}

.card_detail {
    padding: 40rpx 28rpx 32rpx;
}

.adviser_detail {
    border-radius: 28rpx;
    padding: 12rpx 0 36rpx;
    background: linear-gradient(315deg, #8aa0c5 0%, #8198c1 100%);
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.2);
}

.adviser_info,
.adviser_else {
    display: flex;
    align-items: center;
    margin-top: 12rpx;
    padding: 0 32rpx;
    height: 146rpx;
    background: linear-gradient(
        135deg,
        #deebf9 0%,
        rgba(255, 255, 255, 0) 100%
    );
    color: #333;
    justify-content: space-between;
}

.adviser_else {
    margin: 20rpx 0 30rpx;
}

.adviser_info_img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 16rpx;
}

/* 名片电话地址 */
.card_details {
    padding: 36rpx 32rpx 0;
    font-size: 24rpx;
}

/* 导航部分 */
.nav_info {
    display: flex;
    text-align: center;
    justify-content: space-between;
    padding: 40rpx 28rpx 0 32rpx;
    font-size: 32rpx;
}

.to_enterprise {
    width: 172rpx;
    height: 90rpx;
    border-radius: 8rpx;
    border: 2rpx solid #588bf3;
    color: #588bf3;
    line-height: 90rpx;
    font-weight: 500;
}

.to_share {
    width: 478rpx;
    height: 90rpx;
    background: #588bf3;
    border-radius: 8rpx;
    color: #ffffff;
    line-height: 90rpx;
}

.call_info {
    padding: 40rpx 28rpx 40rpx 32rpx;
}

.call_infos {
    height: 132rpx;
    background: #fffbf1;
    border-radius: 20rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 36rpx;
}

.to_call {
    display: flex;
}

/* 个人介绍 */
.enterprise_details {
    padding: 0 12rpx 0 48rpx;
    color: #333;
}

.enterprise_top {
    display: flex;
    height: 44rpx;
    align-items: center;
}

.enterprise_bg {
    display: block;
    width: 8rpx;
    height: 28rpx;
    background: #588bf3;
    margin-right: 8rpx;
}

.enterprise_t {
    color: #666;
    font-size: 26rpx;
    margin-top: 24rpx;
}

/* 其他顾问 */
.else_enterprise {
    padding: 32rpx 28rpx;
}

.el_adviser_info_info {
    display: flex;
    align-items: center;
}

.el_adviser_info_img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    margin: 0 20rpx;
}

button::after {
    border: none;
    border-radius: 0;
}
</style>
